<template>
  <div class='error-container'>
    <div v-if="errorType==='404'"
         class="error">
      <img src="../../../static/img/404.png"
           alt="">
      <span>抱歉,该资源不存在</span>
    </div>
    <div v-if="errorType==='403'"
         class="error">
      <img src="../../../static/img/403.png"
           alt="">
      <span>抱歉,暂无此权限</span>
    </div>
    <div v-if="errorType==='500'"
         class="error">
      <img src="../../../static/img/500.png"
           alt="">
      <span>抱歉,内部发生错误</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 错误类型
      errorType: '404'
    }
  },
  methods: {
  },
  created () {
    console.log(this.$route, 'router')
    this.errorType = this.$route.query.type
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.error-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 480px;
      height: 280px;
    }
    span {
      font-size: 16px;
      color: #333;
    }
  }
}
</style>
